<template>
  <!-- 需求管理 -->
  <custom-container ref="customContainerRef" :config="config" />
  <designatedDeveloper
    v-if="parentId!=null"
    v-model:designTitle="designTitle"
    v-model:designOpen="designOpen"
    v-model:parentId="parentId"
    @changeList="handleQuery"
  ></designatedDeveloper>
  <setForm ref="setFormRef" v-model:title="title" v-model:open="open"></setForm>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, computed, defineAsyncComponent } from 'vue'
import { ElButton, ElMessage, ElMessageBox, ElTag } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { Plus, Edit, Delete, Search, Upload, Bottom, Key, UploadFilled, User } from '@element-plus/icons-vue'
import { type } from 'os'
import { json } from 'stream/consumers'
import usedicts, { DictDirection } from '@/store/modules/dicts'
import { issuedQueryList } from '@/api/demandManagement'

const designatedDeveloper = defineAsyncComponent(() => import('./components/designatedDeveloper.vue'))
const setForm = defineAsyncComponent(() => import('./components/setForm.vue'))
const dicts = usedicts()
const { t } = useI18n()
const // 查询参数
  queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  }),
  // 选中数组
  ids = [],
  // 非多个禁用
  multiple = ref(true),
  single = ref(false),
  title = ref(''),
  open = ref(false),
  designOpen = ref(false),
  designTitle = ref(''),
  customContainerRef = ref(null),
  setFormRef = ref(null),
  {
    proxy,
  }:{
   proxy:any
 } = getCurrentInstance()
const handleQuery = () => {
  customContainerRef.value.getList()
}
// 详细
const handleDetailed = (row:{[key:string]:any}) => {
  title.value = '详情'
  open.value = true
  const data = { id: row.id, pageNum: 1, pageSize: 10 }
  setFormRef.value.getList(data)
}
// eslint-disable-next-line prefer-const
let parentId = ref(null)
// 指定开发人员
const handleDistribution = (row:{[key:string]:any}) => {
  parentId.value = row.id
  designOpen.value = true
  designTitle.value = '指定开发人员'
}
const config = computed(() => {
  const queryField = 'demand.queryField.demandManagement.'
  const columns = 'demand.columns.demandManagement.'
  const publicKey = 'public.'
  return {
    query: {
      fields: [
        {
          label: t(`${ queryField }tag`),
          prop: 'tag',
          option: {
            placeholder: '请输入需求名字',
          },
        },
    
      ],
      queryParams: queryParams.value,
    },
    btns: [
    ],
    table: {
      columns: [
        { type: 'index', width: '55', align: 'center', label: '序号' },
        {
          label: t(`${ columns }tag`),
          prop: 'tag',
          align: 'center',
          width: '100',
        },
        {
          label: t(`${ columns }demandType`),
          prop: 'demandType',
          align: 'center',
          width: '90',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.需求类型, value: row.demandType }),
        },
        {
          label: t(`${ columns }businessType`),
          prop: 'businessType',
          align: 'center',
          width: '90',
          render: (h, scope) => {
            switch (scope.row.businessType) {
              case 0:
                return h(ElTag, { type: 'success' }, { default: () => '低' })
              case 1:
                return h(ElTag, { type: 'warning' }, { default: () => '中' })
              case 2:
                return h(ElTag, { type: 'danger' }, { default: () => '高' })
            }
          },
        },
        {
          label: t(`${ columns }describes`),
          prop: 'describes',
          align: 'center',
          width: '90',
        },
        {
          label: t(`${ columns }position`),
          prop: 'position',
          align: 'center',
          width: '90',
        },
        {
          label: t(`${ columns }approvalStatus`),
          prop: 'approvalStatus',
          align: 'center',
          width: '90',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.审批状态, value: row.approvalStatus }),
        },
        {
          label: t(`${ columns }demanders`),
          prop: 'demanders',
          align: 'center',
          width: '90',
        },
        {
          label: t(`${ columns }timeOfDemand`),
          prop: 'timeOfDemand',
          align: 'center',
          width: '90',
        },
        {
          label: t(`${ columns }submissionTime`),
          prop: 'submissionTime',
          align: 'center',
          width: '90',
        },
        {
          label: t(`${ columns }status`),
          prop: 'status',
          align: 'center',
          width: '90',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.当前进度, value: row.status }),
        },
        {
          label: t(`${ columns }remarks`),
          prop: 'remarks',
          align: 'center',
          width: '90',
        },
        {
          label: t(`${ columns }depId`),
          prop: 'depId',
          align: 'center',
          width: '90',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.部门列表, value: row.depId }), 
        },
        {
          label: t(`${ columns }assessmentPerson`),
          prop: 'assessmentPerson',
          align: 'center',
          width: '90',
            
        },
        {
          label: t(`${ columns }assessmentTime`),
          prop: 'assessmentTime',
          align: 'center',
          width: '90',
            
        },
        {
          label: t(`${ columns }assessmentReason`),
          prop: 'assessmentReason',
          align: 'center',
          width: '90',
            
        },
        {
          label: t(`${ columns }tester`),
          prop: 'tester',
          align: 'center',
          width: '90',
            
        },
        {
          label: t(`${ columns }testTime`),
          prop: 'testTime',
          align: 'center',
          width: '90',
            
        },
        {
          label: t(`${ columns }testReason`),
          prop: 'testReason',
          align: 'center',
          width: '90', 
        },
        {
          label: t(`${ columns }acceptancePerson`),
          prop: 'acceptancePerson',
          align: 'center',
          width: '90', 
        },
        {
          label: t(`${ columns }acceptanceTime`),
          prop: 'acceptanceTime',
          align: 'center',
          width: '90', 
        },
        {
          label: t(`${ columns }acceptanceReason`),
          prop: 'acceptanceReason',
          align: 'center',
          width: '90', 
        },
        {
          label: t(`${ columns }operatorType`),
          prop: 'operatorType',
          align: 'center',
          width: '90', 
        },
        {
          label: t(`${ columns }operator`),
          prop: 'operator',
          align: 'center',
          width: '90', 
        },
        {
          label: t(`${ columns }startTime`),
          prop: 'startTime',
          align: 'center',
          width: '90', 
        },
        {
          label: t(`${ columns }stopTime`),
          prop: 'stopTime',
          align: 'center',
          width: '90', 
        },
        {
          label: t(`${ columns }operation`),
          prop: 'opera',
          align: 'center',
          className: 'custormFixedCol',
          fixed: 'right',
          showOverflowTooltip: false,
          width: '200',
          render: (h, params) => {
            const buttons = [
              {
                title: t(`${ publicKey }detailed`),
                icon: Edit,
                clickFun: handleDetailed,
                directive: [['hasPermi', ['system:operlog:query']]],
              },
              {
                title: t(`${ publicKey }designatedDeveloper`),
                icon: User,
                clickFun: handleDistribution,
                directive: [['hasPermi', ['system:operlog:query']]],
              },
            ]
            return buttons.map((el) => h(
              ElButton,
              {
                text: true,
                type: 'primary',
                icon: el.icon,
                onClick: () => {
                  el.clickFun(params.row)
                },
              },
              {
                default: () => el.title,
              },
            ))
          },
        },
      ],
    },
    api: issuedQueryList,
    customKey: 'system/demandManagement',
  }
})
</script>
